<template>
  <view>
    <van-nav-bar
      title="历史添加列表"
      left-text="返回"
      @click-left="back"
      left-arrow
      custom-style="padding-top:0"
    >
    </van-nav-bar>
    <view class="content">
      <z-paging
        ref="paging"
        v-model="dataList"
        @query="queryList"
        :paging-style="{
          height: 'calc( height: calc(100vh - 174rpx))',
          top: '174rpx',
          backgroundColor: '#eaeaea',
        }"
        :loading-more-custom-style="{ background: '#f8f8f8' }"
        :loading-more-title-custom-style="{ color: '#999' }"
      >
        <view>
          <van-cell-group
            :title="item.title"
            :key="index"
            v-for="(item, index) in deCodelist"
          >
            <van-cell
              v-for="stu in item.list"
              :key="stu.student_id"
              :title="stu.real_name"
              :label="new Date(stu.createDate).toLocaleString()"
              size="large"
              @click="toDetail(stu.student_id)"
            ></van-cell>
          </van-cell-group>
        </view>
      </z-paging>
      <van-notify id="van-notify" />
      <van-toast id="van-toast"></van-toast>
    </view>
    <div v-show="!showPopup" class="serchBtn" @click="showPopup = true">
      <van-icon name="search" size="60rpx" class="icon" />
    </div>
    <van-popup
      :show="showPopup"
      @close="
        showPopup = false;
        showTimePopup = false;
      "
      position="top"
      custom-style="height: 38%;"
    >
      <view class="popusWrap">
        <van-cell-group>
          <van-field
            :value="real_name"
            label="姓名"
            placeholder="请输入姓名"
            input-align="right"
            icon-class="demo-icon"
          />
          <van-cell
            title="开始日期"
            is-link
            clickable
            :value="startTime"
            @click="onshowTimePopup('start')"
          />
          <van-cell
            title="截止日期"
            is-link
            clickable
            :value="endTime"
            @click="onshowTimePopup('end')"
          />
        </van-cell-group>
        <wrap>
          <button class="submit-button">提交</button>
        </wrap>
      </view>
    </van-popup>
    <van-popup
      :show="showTimePopup"
      @close="onClose"
      position="bottom"
      custom-style="height: 40%;"
      :overlay="isOverlay"
    >
      <van-datetime-picker
        type="date"
        :value="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfim"
        :formatter="formatter"
        @cancel="onCancel"
      />
    </van-popup>
  </view>
</template>

<script>
import { stu_getStuList } from "../../api/studentList";
export default {
  data() {
    return {
      dataList: [],
      icon: "icon",
      showPopup: false,
      isOverlay: false,
      timeStatus: "",
      real_name: "",
      startTime: "请输入开始时间",
      endTime: "请输入结束时间",
      showTimePopup: false,
      minDate: new Date("2019-7-1").getTime(),
      maxDate: new Date().getTime(),
      currentDate: new Date().getTime(),
      formatter(type, value) {
        if (type === "year") {
          return `${value}年`;
        }
        if (type === "month") {
          return `${value}月`;
        }
        return value;
      },
    };
  },
  computed: {
    deCodelist() {
      let newData = [];
      this.dataList.forEach((item) => {
        let month = new Date().getMonth() + 1; //当前月
        let today = new Date().getDate(); //今天日期
        let year = new Date().getFullYear();
        let day = new Date(`${year}-${month}-${today}`);
        let yesterday = day - 24 * 3600 * 1000;
        let week = day - 24 * 3600 * 1000 * 7;
        let monthTime = day - 24 * 3600 * 1000 * 30;

        if (new Date(item.createDate) > day) {
          // 今天
          let title = "今天";
          if (this.isExists(title, newData) === -1) {
            newData.push({ title, list: [] });
          }
          newData[this.isExists(title, newData)].list.push(item);
        } else if (
          new Date(item.createDate) > yesterday &&
          new Date(item.createDate) <= day
        ) {
          //昨天
          let title = "昨天";
          if (this.isExists(title, newData) === -1) {
            newData.push({ title, list: [] });
          }
          newData[this.isExists(title, newData)].list.push(item);
        } else if (
          new Date(item.createDate) > week &&
          new Date(item.createDate) <= yesterday
        ) {
          //一周内 3-7天
          let title = "一周内";
          if (this.isExists(title, newData) === -1) {
            newData.push({ title, list: [] });
          }
          newData[this.isExists(title, newData)].list.push(item);
        } else if (
          new Date(item.createDate) > monthTime &&
          new Date(item.createDate) <= week
        ) {
          //一个月内 7-30天
          let title = "一个月内";
          if (this.isExists(title, newData) === -1) {
            newData.push({ title, list: [] });
          }
          newData[this.isExists(title, newData)].list.push(item);
        } else if (new Date(item.createDate) <= monthTime) {
          //一月前 30+天
          let title = "一月前";
          if (this.isExists(title, newData) === -1) {
            newData.push({ title, list: [] });
          }
          newData[this.isExists(title, newData)].list.push(item);
        }
      });
      // newData = newData.map((item) => item.list.length > 0);
      return newData;
    },
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    async queryList(pageNo, pageSize) {
      //组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
      //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
      const params = {
        nowpage: pageNo,
        limit: pageSize,
      };
      console.log(pageNo, pageSize);
      //将请求的结果数组传递给z-paging
      this.$toast.loading("加载中");

      let res = await stu_getStuList(params);
      if (res) {
        this.$refs.paging.complete(res);
        this.$toast.clear();
      }
    },
    // 跳转到详情页
    toDetail(id) {
      // console.log("跳转到详情页", id);
      uni.navigateTo({
        url: "../studentDetail/studentDetail",
        params: {
          id,
        },
      });
    },
    isExists(title, data) {
      return data.findIndex((item) => item.title === title);
    },
    onshowTimePopup(status) {
      this.timeStatus = status;
      this.showTimePopup = true;
    },
    onClose() {
      this.showTimePopup = false;
    },
    onConfim(e) {
      const { detail } = e;
      console.log(e);
      this.currentDate = detail;
      switch (this.timeStatus) {
        case "start":
          this.startTime = new Date(detail).toLocaleDateString();
          this.minDate = detail;
          this.endTime =
            new Date(this.endTime) > new Date(this.startTime)
              ? this.endTime
              : "请输入结束时间";
          break;
        case "end":
          this.endTime = new Date(detail).toLocaleDateString();
          break;
      }
      this.onClose();
    },
    onCancel() {
      this.onClose();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
